<template>
  <!-- 主页面框架 -->
  <ALayout class="frame">
    <ALayoutHeader class="header">
      <vy-theme-header :tag="2" :projectid="projectId"></vy-theme-header>
    </ALayoutHeader>
    <ALayout class="center">
      <ALayoutContent class="content">
        <div class="members-group">
          <div class="create-group">
            <img
              class="create-group-img"
              src="https://image.xuexiwangzhe.com/FjHKWcHb7CJedBklH5248lPSwVB-"
            />
            <span @click="click_add_group">创建分组</span>
          </div>
          <mu-list class="members-group-list">
            <mu-list-item
              button
              :ripple="false"
              @click="chooseGroupUsers('-1')"
            >
              <mu-list-item-title>未分组</mu-list-item-title>
              <mu-list-item-action>
                <div>{{ unGroupDataCount }}</div>
              </mu-list-item-action>
            </mu-list-item>
          </mu-list>
          <mu-divider class="list-divider"></mu-divider>
          <mu-list class="members-group-list" @change="chooseGroupUsers">
            <mu-list-item :value="0" button :ripple="false">
              <mu-list-item-title>全部</mu-list-item-title>
              <mu-list-item-action>
                {{ membersCount }}
              </mu-list-item-action>
            </mu-list-item>
            <template v-for="group in groupList">
              <mu-list-item
                :key="group.groupId"
                :value="group.groupId"
                button
                :ripple="false"
              >
                <mu-list-item-title>{{ group.name }}</mu-list-item-title>
                <mu-list-item-action style="position:relative;">
                  <div>{{ group.num }}</div>
                  <mu-menu
                    cover
                    placement="right-start"
                    popover-class="settings-menu"
                    :open.sync="open[group.groupId]"
                  >
                    <mu-icon value="settings" class="settings"></mu-icon>
                    <mu-list slot="content">
                      <mu-list-item button @click="renameGroupBt(group)">
                        <mu-list-item-title>
                          <mu-icon value="edit" left></mu-icon>
                          <span>重命名</span>
                        </mu-list-item-title>
                      </mu-list-item>
                      <mu-list-item button @click="deleteGroup(group)">
                        <mu-list-item-title>
                          <mu-icon value="delete" left></mu-icon>删除
                        </mu-list-item-title>
                      </mu-list-item>
                    </mu-list>
                  </mu-menu>
                </mu-list-item-action>
              </mu-list-item>
            </template>
          </mu-list>
        </div>
        <div class="vy-memberlist-container">
          <!--人员管理 start-->
          <a-row class="vy-memberlist-btns">
            <a-button class="import-btn" type="primary" @click="importUserList">
              <a-icon type="user-add" style="font-size:18px;" />
              导入名单
            </a-button>
            <input
              type="file"
              id="docpicker"
              name="nameList"
              @change="getExcelFile"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
              style="display: none"
            />
            <a
              href="https://image.xuexiwangzhe.com/分组名单导入模板.xlsx"
              download="名单模板.xlsx"
              class="template-download"
            >
              <a-icon type="download" />
              模版下载</a
            >
          </a-row>
          <div class="vy-members-main">
            <a-row class="vy-memberlist-header">
              <div class="vy-memberlist-header-left">
                <div v-if="selectGroup.groupName" class="title">
                  {{ selectGroup.groupName }}
                </div>
                <div v-else class="title">全部</div>
                <div class="desc" @click="powerModalVisible = true">
                  <span>成员权限</span>
                  <a-icon type="question-circle" />
                </div>
              </div>
              <div class="vy-memberlist-header-right">
                <!-- <a-input-search
                placeholder="搜索成员"
                style="width: 200px"
                v-model="selectGroup.name"
                @search="onSearch"
              /> -->
                <div v-click-outside="closeSearch">
                  <img
                    src="https://image.xuexiwangzhe.com/FsLB0AW7hFGPYP4jFtrVqUNMMEqs"
                    class="search-img"
                    @click="onSearch"
                  />
                  <mu-text-field
                    @keyup.enter.native="onSearch"
                    :class="['search-input', searchOpen ? 'open-search' : '']"
                    v-model="selectGroup.name"
                  ></mu-text-field>
                </div>
              </div>
            </a-row>
            <a-row class="vy-memberlist-body" style="height:70%;">
              <div
                v-show="memberList.length"
                v-infinite-scroll="handleInfiniteOnLoad"
                class="vy-memberlist-infinite-container"
                :infinite-scroll-disabled="memberPage.busy"
                :infinite-scroll-distance="10"
              >
                <a-list :dataSource="memberList">
                  <a-list-item
                    slot="renderItem"
                    slot-scope="item, index"
                    :key="index"
                  >
                    <a-list-item-meta :description="item.name">
                      <a slot="title" :href="item.href">{{ item.userName }}</a>
                      <a-avatar
                        slot="avatar"
                        :src="'https://image.xuexiwangzhe.com/' + item.photo"
                      />
                    </a-list-item-meta>
                    <div class="vy-member-right">
                      <div class="job">
                        <span v-if="item.roleId == 0">学员</span>
                        <span v-if="item.roleId == 1" class="row-right1-panel"
                          >讲师</span
                        >
                        <span v-if="item.roleId == 2" class="row-right1-panel"
                          >班主任</span
                        >
                        <span v-if="item.roleId == 3" class="row-right1-panel"
                          >领导</span
                        >
                        <span v-if="item.roleId == 4" class="row-right1-panel"
                          >助教</span
                        >
                      </div>
                      <img
                        src="https://image.xuexiwangzhe.com/FupPelgGuu7meLpGp_3A6_DjQwqv"
                        class="setting"
                        @click="showMemberSetting(item, index)"
                      />
                    </div>
                  </a-list-item>
                  <div
                    v-if="memberPage.loading && !memberPage.busy"
                    class="vy-memberlist-loading-container"
                  >
                    <a-spin />
                  </div>
                </a-list>
              </div>
              <div style="padding: 100px;" v-show="!memberList.length">
                <a-empty>
                  <span slot="description"
                    >当前分组没有成员，可在“未分组”将成员拖拽至左侧分组</span
                  >
                </a-empty>
              </div>
            </a-row>
          </div>
          <!--人员管理 end-->
        </div>
      </ALayoutContent>
    </ALayout>
    <!-- 成员权限 modal 框 -->
    <mu-dialog
      class="power-info-modal"
      title="团队成员权限"
      width="695"
      :open.sync="powerModalVisible"
    >
      <div class="power-item">
        <h4 class="title">班主任</h4>
        <ul class="list-ul">
          <li>创建，关闭项目</li>
          <li>编辑主题/规则</li>
          <li>点评/置顶/赞/删除打卡和作业</li>
          <li>管理项目成员</li>
          <li>查看数据报告</li>
        </ul>
      </div>
      <div class="power-item">
        <h4 class="title">助教</h4>
        <ul class="list-ul">
          <li>编辑主题/规则</li>
          <li>点评/置顶/赞/删除打卡和作业</li>
          <li>管理项目成员</li>
        </ul>
      </div>
      <div class="power-item">
        <h4 class="title">领导</h4>
        <ul class="list-ul">
          <li>点评/赞打卡和作业</li>
          <li>赞/评论瞬间内容</li>
        </ul>
      </div>
      <div class="power-item">
        <h4 class="title">讲师</h4>
        <ul class="list-ul">
          <li>点评/赞打卡和作业</li>
          <li>赞/评论瞬间内容</li>
        </ul>
      </div>
      <div class="power-item">
        <h4 class="title">学员</h4>
        <ul class="list-ul">
          <li>完成打卡和作业</li>
          <li>发表瞬间内容</li>
          <li>赞/评论别人内容</li>
          <li>参与排行榜</li>
        </ul>
      </div>
      <mu-button
        class="mu-button-a"
        slot="actions"
        :ripple="false"
        flat
        type="a"
        @click="powerModalVisible = false"
        >知道啦</mu-button
      >
    </mu-dialog>
    <!-- 创建分组 modal 框 -->
    <mu-dialog title="分组名称" width="470" :open.sync="groupModalVisible">
      <mu-text-field
        placeholder="分组名称"
        v-model="editItem.name"
        style="width:100%;"
      ></mu-text-field>
      <mu-button
        class="mu-button-cancel"
        slot="actions"
        flat
        @click="click_modal_cancel"
        >取消</mu-button
      >
      <mu-button
        class="mu-button-submit"
        slot="actions"
        flat
        color="primary"
        @click="click_modal_ok"
        >确定</mu-button
      >
    </mu-dialog>

    <!-- 分组重命名 modal 框 -->

    <mu-dialog
      title="分组名称"
      width="470"
      :open.sync="renameGroupModalVisible"
    >
      <mu-text-field
        placeholder="分组名称"
        v-model="editItem.name"
        style="width:100%;"
      ></mu-text-field>
      <mu-button
        class="mu-button-cancel"
        slot="actions"
        flat
        color="primary"
        @click="click_modal_cancel"
        >取消</mu-button
      >
      <mu-button
        class="mu-button-submit"
        slot="actions"
        flat
        color="primary"
        @click="renameGroupOk"
        >确定</mu-button
      >
    </mu-dialog>

    <!-- 成员设置 modal 框 -->
    <mu-dialog
      width="600"
      class="member-setting-modal"
      :open.sync="settingModalVisible"
    >
      <mu-flex style="width:100%;" justify-content="between" slot="title">
        <mu-flex class="member-info" align-items="center">
          <img
            :src="['https://image.xuexiwangzhe.com/' + editMember.photo]"
            class="member-head"
          />
          <mu-flex align-items="end">
            <span v-show="!editNameOpen" class="member-name">{{
              editMember.name
            }}</span>
            <div v-click-outside="closeEditName" v-show="editNameOpen">
              <mu-text-field
                placeholder="姓名"
                :error-text="editNameError"
                v-model="editName"
                class="member-name-input"
              ></mu-text-field>
              <mu-button class="member-name-btn" @click="editMemberName" flat
                >确定</mu-button
              >
            </div>
            <mu-icon
              v-if="editMember.flag && !editNameOpen"
              class="member-edit-img"
              @click.stop="editNameClick"
              value="edit"
              size="12"
            />
          </mu-flex>
        </mu-flex>
        <img
          class="close-img"
          @click="settingModalVisible = false"
          src="https://image.xuexiwangzhe.com/Fu0mgT0EvO3rPRgf2jb0IxAgE3cA"
        />
      </mu-flex>
      <mu-flex
        class="member-set-item"
        justify-content="between"
        align-items="end"
      >
        <div class="member-set-title">
          <a-icon type="lock" />
          <span>成员权限</span>
        </div>
        <mu-select
          class="member-role-select"
          popover-class="member-role-select-popover"
          v-model="editMember.roleId"
          solo
        >
          <mu-option value="0" label="学员"> </mu-option>
          <mu-option value="1" label="讲师"> </mu-option>
          <mu-option value="2" label="班主任"> </mu-option>
          <mu-option value="3" label="领导"> </mu-option>
          <mu-option value="4" label="助教"> </mu-option>
        </mu-select>
      </mu-flex>
      <mu-flex align-items="end" class="member-set-item">
        <div class="member-set-title">
          <a-icon type="cluster"></a-icon>
          <span>所属分组</span>
        </div>
      </mu-flex>
      <div class="member-group-list">
        <mu-flex
          align-items="center"
          justify-content="between"
          class="member-group-list-item"
        >
          <mu-radio
            :value="0"
            v-model="editMember.groupId"
            label="未分组"
            label-left
            class="member-group-name"
          ></mu-radio>
        </mu-flex>
        <mu-flex
          align-items="center"
          justify-content="between"
          class="member-group-list-item"
          :key="index"
          v-for="(group, index) in groupList"
        >
          <mu-radio
            :value="group.groupId"
            v-model="editMember.groupId"
            :label="group.name"
            label-left
            class="member-group-name"
          ></mu-radio>
        </mu-flex>
      </div>
      <mu-flex class="footer" align-items="center" justify-content="between">
        <span class="btn-delete" @click="deleteUser">删除成员</span>
        <mu-button
          class="mu-button-submit"
          slot="actions"
          flat
          color="primary"
          @click="saveUserEdit"
          >确定</mu-button
        >
      </mu-flex>
    </mu-dialog>
  </ALayout>
</template>

<script>
import VyHeader from "../../../components/theme-header.vue";
import Message from "muse-ui-message";
import infiniteScroll from "vue-infinite-scroll";

export default {
  directives: {
    infiniteScroll,
    focus: {
      inserted(el, { value }) {
        if (value) {
          console.log(el.getElementsByTagName("input"));
          el.focus();
        }
      },
    },
  },
  data() {
    return {
      // 左侧分组列表
      groupList: [],
      // 右侧人员列表
      memberList: [],
      listOperate: "all",
      projectId: null, // 项目id
      powerModalVisible: false, //成员权限 modal 框 显隐状态
      groupModalVisible: false, // 创建分组 modal 框 显隐状态
      renameGroupModalVisible: false, // 重命名分组 modal 框 显隐状态
      settingModalVisible: false, // 成员设置 modal 框 显隐状态
      searchOpen: false,
      editItem: {}, // 编辑的分组对象
      editName: "",
      editNameOpen: false,
      editNameError: "",
      nameList: null,
      editMember: {},
      memberPage: {
        number: 0,
        size: 10,
        isScroll: false,
        loading: false,
        busy: false,
      },
      membersCount: 0,
      unGroupDataCount: 0,
      open: {},
      selectGroup: { name: "", groupName: "" },
    };
  },
  components: {
    [VyHeader.name]: VyHeader,
  },
  created() {
    this.projectId = this.$route.query.projectId;
    this.getUserGroupList();
  },
  methods: {
    //分组搜索
    onSearch() {
      if (!this.searchOpen) {
        this.openSearch();
        return;
      }
      this.openSearch();
      this.listOperate = "search";
      this.getData();
    },
    //分组查询成员列表
    chooseGroupUsers(item) {
      console.log(item);
      if (item == "0") {
        this.listOperate = "all";
        this.selectGroup = { groupId: "", groupName: "", name: "" };
      } else if (item == "-1") {
        const groupName = "未分组";
        this.selectGroup = { groupId: 0, groupName, name: "" };
        this.listOperate = "unGroup";
      } else {
        const groupName = this.groupList.find((t) => t.groupId === item).name;
        this.selectGroup = { groupId: item, groupName, name: "" };
        this.listOperate = "list";
      }

      this.getData();
    },
    //删除选中学员
    deleteUser() {
      let params = Object.assign({
        id: this.editMember.projectUserId,
      });
      var _this = this;
      Message.confirm(
        "您确定要删除该用户么？",
        "删除后将不可恢复，请谨慎操作！",
        { type: "warning" }
      ).then((result) => {
        if (result.result) {
          _this.$axios.post("/usergrouprelation/delete", params).then((res) => {
            if (res.success) {
              _this.$toast.message("删除成功");
              _this.settingModalVisible = false;
              _this.getUserGroupList();
              // _this.getProgectAllUser();
              this.listOperate = "search";
              this.getData();
            } else {
              _this.$toast.error(res.msg);
              _this.settingModalVisible = false;
            }
          });
        }
      });
    },
    //保存设置：/usergrouprelation/updateRole
    saveUserEdit() {
      // const params = this.editMember;
      let params = Object.assign(this.editMember);
      this.$axios.post("/usergrouprelation/updateRole", params).then((res) => {
        if (res.success) {
          this.$toast.success("设置成功");
          this.settingModalVisible = false;
          this.getUserGroupList();
          this.listOperate = "search";
          this.getData();
          // this.getProgectAllUser();
        } else {
          this.$toast.error(res.msg);
          this.settingModalVisible = false;
        }
      });
    },
    //显示成员编辑框
    showMemberSetting(member, index) {
      this.resetEditName();
      this.settingModalVisible = true;
      const params = {
        projectId: this.projectId,
        roleId: member.roleId,
        userName: member.userName,
        uid: member.uid,
        projectUserId: member.projectUserId,
        groupId: member.groupId,
      };
      this.$axios.get("/userGroup/userInfo", { params }).then((res) => {
        if (res.success) {
          this.editMember = {
            index,
            name: res.userName,
            roleId: res.roleId + "",
            projectId: this.projectId,
            groupId: res.groupId,
            photo: res.photo,
            uid: member.uid,
            flag: res.flag,
            projectUserId: member.projectUserId,
          };
        }
      });
    },
    resetEditName() {
      this.editName = "";
      this.editNameOpen = false;
      this.editNameError = "";
    },
    //选择模板文件
    getExcelFile(e) {
      this.nameList = e.target.files[0];
      const fileType = this.nameList.name.split(".");
      if (fileType[fileType.length - 1] != "xlsx") {
        this.$error({
          title: "文件上传错误",
          content: "名单导入失败，请下载模板进行编辑上传，切勿修改文件格式！",
        });
      } else {
        let file = e.target.files[0];
        let param = new FormData(); //创建form对象
        param.append("file", file); //通过append向form对象添加数据
        param.append("projectId", this.projectId);
        console.log(param.get("file")); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        }; //添加请求头
        this.$axios
          .post("/userGroup/importGroup", param, config)
          .then((res) => {
            if (res.success) {
              this.$toast.success("名单上传成功");
            } else {
              this.$toast.error(res.msg);
            }
            this.getUserGroupList();
            this.listOperate = "all";
            this.getData();
            // this.getProgectAllUser();
          });
      }
    },
    closeSearch() {
      this.searchOpen = false;
    },
    openSearch() {
      this.searchOpen = true;
      document.getElementsByClassName("mu-text-field-input")[0].focus();
    },
    //选择文件
    importUserList() {
      document.getElementById("docpicker").click();
    },
    // 重置弹框内容
    resetGroupModal() {
      this.editItem = {};
      this.groupModalVisible = false;
      this.renameGroupModalVisible = false;
    },
    // 添加分组 - 按钮
    click_add_group() {
      this.editItem = {};
      this.groupModalVisible = true;
    },
    // modal 框 - 取消
    click_modal_cancel() {
      this.resetGroupModal();
    },
    // modal 框 - 确认按钮
    click_modal_ok() {
      if (!this.editItem.name) {
        this.$toast.error("请输入分组名称");
        return;
      }
      this.saveGroupInfo();
    },
    // 人员列表点击事件
    click_memberItem(item, e) {
      console.log("点击", item);
      this.memberList.forEach((member) => {
        member.isActived = false;
      });
      item.isActived = true;
    },
    // 保存分组
    saveGroupInfo() {
      let params = Object.assign(
        {
          projectId: this.projectId,
        },
        this.editItem
      );
      this.$axios.post("/userGroup/create", params).then((res) => {
        if (res.success) {
          this.$success({
            title: res.msg,
          });
        } else {
          this.$error({
            title: res.msg,
          });
        }
        this.resetGroupModal();
        this.getUserGroupList();
      });
    },
    //get 分组列表
    getUserGroupList() {
      // userGroup/index :projectId
      let params = { params: { projectId: this.projectId } };
      this.$axios.get("userGroup/index", params).then((res) => {
        console.log(res);
        if (res.success) {
          this.membersCount = res.size;
          this.unGroupDataCount =
            (res.unGroupList && res.unGroupList.length) || 0;
          this.groupList = res.userGroupVos;
        } else {
          this.$toast.error("分组列表获取失败，请刷新页面！");
        }
      });
      this.groupList;
    },
    //分组重命名
    renameGroupBt(g) {
      this.editItem = { id: g.groupId, name: g.name };
      this.renameGroupModalVisible = true;
    },
    renameGroupOk() {
      // userGroup/update :id,name
      let params = Object.assign(
        {
          id: this.editItem.id,
        },
        this.editItem
      );
      this.$axios.post("/userGroup/update", params).then((res) => {
        if (res.success) {
          this.$success({
            title: res.msg,
          });
        } else {
          this.$error({
            title: res.msg,
          });
        }
        //重置重命名编辑
        this.editItem = {};
        this.renameGroupModalVisible = false;
        this.getUserGroupList();
      });
    },
    getData() {
      this.memberPage.number = 0;
      this.memberPage.size = 10;
      this.memberPage.loading = false;
      this.memberPage.busy = false;
      this.memberPage.isScroll = false;
      this.memberList = [];
      this.handleInfiniteOnLoad(this.memberPage.isScroll);
    },
    // 获取未分组成员
    unGroupData() {
      let params = {
        params: {
          projectId: this.projectId,
          groupId: 0,
          page: this.memberPage.number,
          size: this.memberPage.size,
        },
      };
      this.$axios.get("/userGroup/listUnGroupMember", params).then((res) => {
        console.log(res);
        if (res.success) {
          this.memberListCallBack(res);
        } else {
          this.$toast.error("成员列表获取失败，请刷新页面！");
        }
      });
    },
    //获取全部成员
    fetchData(callback) {
      let params = {
        params: {
          projectId: this.projectId,
          page: this.memberPage.number,
          size: this.memberPage.size,
        },
      };
      this.$axios.get("/userGroup/listAllMember", params).then((res) => {
        console.log(res);
        if (res.success) {
          callback(res);
        } else {
          this.$toast.error("成员列表获取失败，请刷新页面！");
        }
      });
    },
    searchData(callback) {
      var URL = "";
      if (
        this.selectGroup.groupId !== undefined &&
        this.selectGroup.groupId !== ""
      ) {
        URL = "usergrouprelation/searchOneGroupMember";
      } else {
        URL = "userGroup/searchGroupMember";
      }
      let params = {
        params: {
          projectId: this.projectId,
          groupId: this.selectGroup.groupId,
          name: this.selectGroup.name,
          page: this.memberPage.number,
          size: this.memberPage.size,
        },
      };
      this.$axios.get(URL, params).then((res) => {
        console.log(res);
        if (res.success) {
          callback(res);
        } else {
          this.$toast.error(res.msg);
        }
      });
    },
    listData(callback) {
      let params = {
        params: {
          projectId: this.projectId,
          groupId: this.selectGroup.groupId,
          page: this.memberPage.number,
          size: this.memberPage.size,
        },
      };
      this.$axios.get("userGroup/listOneGroupMember", params).then((res) => {
        console.log(res);
        if (res.success) {
          callback(res);
        } else {
          this.$toast.error(res.msg);
        }
      });
    },
    handleInfiniteOnLoad(isScroll = true) {
      this.memberPage.isScroll = isScroll;
      this.memberPage.loading = true;
      this.memberPage.number += 1;
      switch (this.listOperate) {
        case "all":
          this.fetchData((res) => {
            this.memberListCallBack(res);
          });
          break;
        case "search":
          this.searchData((res) => {
            this.memberListCallBack(res);
          });
          break;
        case "list":
          this.listData((res) => {
            this.memberListCallBack(res);
          });
          break;
        case "unGroup":
          this.unGroupData();
          break;
        default:
          this.fetchData((res) => {
            this.memberListCallBack(res);
          });
          break;
      }
    },
    memberListCallBack(res) {
      const data = this.memberList;
      if (!res.userGroupRelationVoPage) {
        if (this.memberPage.isScroll) {
          this.$toast.warning("到底啦");
        }
      }
      if (
        res.userGroupRelationVoPage &&
        res.userGroupRelationVoPage.content.length > 0
      )
        this.memberList = data.concat(res.userGroupRelationVoPage.content);

      this.memberPage.loading = false;
    },
    //删除分组：/userGroup/delete
    deleteGroup(g) {
      var _this = this;
      Message.confirm("删除分组", "您确定要删除分组么？", {
        type: "warning",
      }).then((result) => {
        if (result.result) {
          console.log("点击确认");
          let params = Object.assign(
            {
              id: g.groupId,
              projectId: _this.projectId,
            },
            _this.editItem
          );
          _this.$axios.post("/userGroup/delete", params).then((res) => {
            if (res.success) {
              _this.$toast.success(res.msg);
            } else {
              _this.$toast.error(res.msg);
            }
            //重置重命名编辑
            _this.getUserGroupList();
          });
        }
      });
    },
    editNameClick() {
      this.editName = this.editMember.name;
      this.editNameOpen = true;
    },
    closeEditName() {
      this.resetEditName();
    },
    editMemberName() {
      if (!this.editName) {
        this.editNameError = "姓名必填";
        return;
      }
      this.editNameError = "";
      const params = {
        name: this.editName,
        projectId: this.editMember.projectId,
        projectUserId: this.editMember.projectUserId,
        groupId: this.editMember.groupId,
      };
      this.$axios.post("/usergrouprelation/updateName", params).then((res) => {
        if (res.success) {
          this.editMember.name = this.editName;
          const member = this.memberList[this.editMember.index];
          member.userName = this.editName;
          this.resetEditName();
          this.$toast.success("修改姓名成功");
        } else {
          this.$toast.error(res.msg);
        }
      });
    },
  },
};
</script>

<style type="text/css" lang="scss">
.member-role-select-popover {
  .mu-option.is-selected .mu-item {
    color: #3366ff;
  }
}

.header {
  box-shadow: 0px 3px 16px 0px rgba(80, 88, 111, 0.16);
}

.power-info-modal {
  .mu-dialog-title {
    padding-bottom: 26px;
  }
  .mu-dialog-body {
    padding-bottom: 5px;
  }

  .mu-dialog-actions {
    padding-bottom: 10px;
    padding-right: 0;
  }
}

.power-item {
  &:last-child {
    margin-bottom: 0;
  }
  margin-bottom: 30px;
  .title {
    color: #343c49;
  }

  .list-ul {
    line-height: 1;
    > li {
      &:last-child {
        padding: 0;
        margin: 0;
        border-right: none;
      }
      display: inline-block;
      vertical-align: middle;
      padding-right: 10px;
      margin-right: 10px;
      border-right: 1px solid #9da1a7;
    }
    padding: 0;
    margin: 0;
    list-style: none;
    color: #9da1a7;
  }
}

.members-group {
  width: 280px;
  height: 80%;
  min-height: 400px;
  padding-right: 27px;
  border-right: 1px solid #f4f4f4;
  margin-top: 110px;

  .list-divider {
    background-color: #edeff3;
  }

  .create-group {
    font-size: 16px;
    color: #9ea0a4;
    font-weight: bold;
    margin-bottom: 10px;
    padding-left: 25px;
    cursor: pointer;

    > * {
      display: inline-block;
      vertical-align: middle;
    }
    &-img {
      width: 16px;
      margin-right: 7px;
    }
  }
}

@media screen and (min-width: 1370px) {
  .members-group {
    width: 339px;
  }
}
.members-group-list {
  .mu-item {
    padding-left: 47px;
    padding-right: 55px;

    &:hover {
      .mu-menu {
        visibility: visible;
      }
    }
  }
  .mu-item-title {
    font-size: 14px;
    color: #545658;
    font-weight: bold;
  }
  .mu-item-action {
    color: #b0b2b6;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    .mu-menu-activator {
      line-height: 1;
    }

    .mu-menu {
      margin-right: -35px;
      visibility: hidden;
    }

    .settings {
      font-size: 16px;
      margin-left: 19px;
      cursor: pointer;
    }
  }
}

.settings-menu {
  .mu-list {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .mu-item {
    height: 30px;
  }
  .mu-item-title {
    line-height: 30px;
    font-size: 14px;
    height: 30px;
    > * {
      display: inline-block;
      vertical-align: middle;
    }
    > i {
      margin-right: 8px;
      font-size: 18px;
    }
  }
}
.ant-layout {
  height: 100%;

  .ant-layout-header {
    padding: 0;
    background: #ffffff;
    -webkit-box-shadow: -8px -1px 30px 0px rgba(25, 63, 100, 0.15);
    box-shadow: -8px -1px 30px 0px rgba(25, 63, 100, 0.15);
    z-index: 9;
  }

  .ant-layout-sider {
    background: #ffffff;
  }
}

.sleft {
  padding: 30px 20px;
  // box-shadow: -8px -1px 30px 0px rgba(25, 63, 100, 0.15);
  border-right: 1px solid rgba(244, 244, 244, 1);

  .ant-menu {
    // padding: 10px 20px;
    border: none;

    .ant-menu-item {
      margin: 0px;
      padding-left: 30px;
      font-weight: 400;
      color: rgba(103, 103, 103, 1);

      &.ant-menu-item-selected {
        background-color: #edeff3;
      }
    }
  }

  .vy-member-groupmgr {
    // border: 1px solid pink;
    padding-left: 50px;
    margin-top: 50px;

    .vy-member-panel {
      padding: 10px;

      .ant-btn {
        border: 0;
        box-shadow: none;

        &:hover {
          background-color: transparent;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }

    .vy-member-list {
      // border: 1px solid darkcyan;
    }
  }
}

.content {
  // box-shadow: -8px -1px 30px 0px rgba(25, 63, 100, 0.15);
  // padding: 0 0 0 20px;
  background: #ffffff;
  display: flex;
  justify-content: center;

  .vy-memberlist-container {
    position: relative;
    width: 800px;
    height: 100%;
    padding-left: 23px;

    .vy-members-main {
      height: 80%;
      min-height: 400px;
    }

    .vy-memberlist-btns {
      position: absolute;
      top: 27px;
      left: 40px;
      width: 900px;
      padding: 10px 10px 10px 35px;
      display: flex;
      align-items: center;

      .import-btn {
        width: 110px;
        height: 40px;
        background: #3366ff;
        box-shadow: 0px 2px 21px 0px rgba(25, 63, 100, 0.11);
        border-radius: 8px;
        margin-right: 29px;
      }

      .template-download {
        color: #3366ff;
      }
    }

    .vy-memberlist-header {
      margin-top: 110px;
      margin-bottom: 18px;
      padding-left: 51px;
      line-height: 1;
      display: flex;
      align-items: flex-start;
      // border: 1px solid red;
      .vy-memberlist-header-left {
        // border: 1px solid salmon;
        display: flex;
        align-items: flex-end;
        .title {
          font-weight: 500;
          color: rgba(12, 21, 36, 1);
          font-size: 18px;
          margin-right: 28px;
        }

        .desc {
          cursor: pointer;
          font-weight: 600;
          align-self: flex-end;
          color: rgba(177, 179, 183, 1);
          > * {
            display: inline-block;
            vertical-align: middle;
          }
          > i {
            margin-left: 10px;
            font-size: 12px;
          }
        }
      }

      .vy-memberlist-header-right {
        // border: 1px solid magenta;
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 81px;
        margin-top: -10px;

        .search-input {
          transition: width 0.5s;
          width: 0;
        }

        .search-img {
          margin-right: 10px;
          width: 22px;
          cursor: pointer;
        }

        .open-search {
          width: 200px;
        }

        .mu-input {
          margin-bottom: 0;
          padding-bottom: 0;
          align-self: flex-end;
        }

        .mu-text-field {
          transition: width 0.5s;
        }
      }
    }

    .vy-memberlist-body {
      .vy-member-row {
        padding: 15px 0;
        display: flex;
        cursor: pointer;
        border-bottom: 1px solid rgba(239, 241, 247, 1);

        &.actived {
          background-color: rgba(246, 247, 249, 1);
        }

        .vy-member-row-left1 {
          min-width: 25px;
          position: relative;

          .row-left1-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .vy-member-row-left2 {
          min-width: 50px;

          img {
            width: 40px;
            height: 40px;
            margin: 0 auto;
            display: block;
          }
        }

        .vy-member-row-center {
          padding: 5px 10px;
          flex: 1;

          .vy-center-title {
            font-weight: 600;
            color: rgba(24, 32, 46, 1);
          }

          .vy-center-group {
            font-weight: 600;
            color: rgba(177, 179, 183, 1);
          }
        }

        .vy-member-row-right1 {
          min-width: 80px;
          position: relative;

          .row-right1-panel {
            position: absolute;
            width: 100%;
            text-align: right;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .vy-member-row-right2 {
          min-width: 40px;
          position: relative;

          .row-right2-panel {
            position: absolute;
            width: 100%;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }

      .vy-member-right {
        > * {
          display: inline-block;
          vertical-align: middle;
        }

        .job {
          margin-right: 5px;
          font-size: 15px;
          font-weight: bold;
          color: #717375;
        }
      }

      .vy-memberlist-infinite-container {
        height: 100%;
        overflow-y: auto;
        line-height: 1;

        .ant-list-item {
          height: 79px;
          border-bottom: 1px solid #eff1f7;
          cursor: pointer;
          &:hover {
            background-color: #f6f7f9;
            .setting {
              visibility: visible;
            }
          }
          padding-left: 51px;
          padding-right: 60px;

          .setting {
            visibility: hidden;
            width: 16px;
            cursor: pointer;
          }
        }

        .ant-list-item-meta {
          align-items: center;
        }

        .ant-list-item-meta-title,
        .ant-list-item-meta-description {
          line-height: 1;
        }

        .ant-list-item-meta-title {
          margin-bottom: 10px;
          color: #18202e;
          font-weight: bold;
        }

        .ant-list-item-meta-description {
          color: #b1b3b7;
        }
      }
      .vy-memberlist-loading-container {
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
      }
    }
  }

  @media screen and (min-width: 1500px) {
    .vy-memberlist-container {
      width: 1070px;
    }
  }
}

.member-setting-modal {
  .mu-dialog {
    height: 500px;
    position: relative;
  }

  .close-img {
    width: 30px;
    cursor: pointer;
  }

  .footer {
    position: absolute;
    padding: 24px 24px 20px;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .member-info {
    line-height: 1;
  }

  .member-role-select {
    width: 80px;
    padding: 0;
    min-height: auto;

    .mu-select-content {
      min-height: auto;
    }
    .mu-select-input {
      text-align: right;
      height: auto;
    }
  }

  .member-head {
    width: 30px;
    height: 30px;
    margin-right: 15px;
  }

  .member-name {
    margin-right: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #0c1524;
  }

  .member-name-input {
    width: 100px;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .member-name-btn {
    min-width: 60px;
    // color: #3366ff;
  }

  .member-edit-img {
    cursor: pointer;
    color: #828385;
  }

  .member-set-item {
    padding-bottom: 10px;
    border-bottom: 1px solid #f4f4f5;
    height: 63px;
  }

  .member-group-list {
    padding: 10px 0;
    max-height: 200px;
    overflow-y: auto;
  }

  .member-set-title {
    > i {
      margin-right: 10px;
    }
    span {
      font-weight: bold;
    }
  }

  .member-group-name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .mu-radio-icon {
      font-size: 12px;
    }
    .mu-radio-label {
      color: #858585;
      font-size: 14px;
    }
  }

  .member-group-list-item {
    padding-left: 20px;
    padding-right: 10px;
    height: 40px;
  }

  .btn-delete {
    color: #ff5c93;
    cursor: pointer;
  }
}

.vy-modal-group {
  width: 450px;

  .vy-group-name {
    border: none;
    border-bottom: 1px solid rgba(51, 102, 255, 1);

    input {
      border: none;
      outline: none;
    }
  }

  .vy-modal_cancel {
    border: none;
  }

  .vy-modal_ok {
    background: rgba(51, 102, 255, 1);
  }
}

.vy-modal-member-setting {
  .vy-modal-title {
    font-weight: 600;
    color: rgba(12, 21, 36, 1);
  }

  .setting-row {
    padding: 10px 0;
  }

  .vy-modal_cancel {
    color: rgba(255, 92, 147, 1);
    border: none;
  }

  .vy-modal_ok {
    background: rgba(51, 102, 255, 1);
  }
}
</style>
